<template>

  <el-card shadow="never" class="border-0">
    <!-- 搜索 -->


    <SearchForm :model="searchForm" @search="getList" @reset="resetSearchForm">
      <SearchItem label="">

        <div class="mt-4" style="width: 100%;margin-left: 0px !important;">
          <el-input v-model="searchForm.name" placeholder="请输入公司名称，法人姓名" class="input-with-select">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
            <template #append>
              <el-select v-model="searchForm.is_auth" placeholder="请选择认证状态" style="width: 130px">
                <el-option key="0" label="全部" value="" />
                <el-option key="0" label="未认证" value="0" />
                <el-option key="1" label="已认证" value="1" />
              </el-select>
            </template>
          </el-input>
        </div>


      </SearchItem>
    </SearchForm>

    <!-- 新增|刷新 -->
    <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getList" />

    <el-table :data="tableData" stripe style="width: 100%; text-align: center" v-loading="loading" border>
      <el-table-column type="index" label="序号" width="100" style="text-align: center" align="center " />
      <el-table-column prop="name" label="公司名称" width="300" style="text-align: center" align="center " />
      <el-table-column prop="id_card" label="法人身份证" style="text-align: center" align="center " />
      <el-table-column prop="license_number" label="营业执照编号" style="text-align: center" align="center " />
      <el-table-column prop="mobile" label="法人手机号" style="text-align: center" align="center " />
      <el-table-column label="是否认证" style="text-align: center" align="center ">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.is_auth == 1">已认证</el-tag>

          <el-popconfirm title="是否认证该公司？" confirmButtonText="确认" cancelButtonText="取消"
            @confirm="setCompanyInfo(scope.row.id)">
            <template #reference>
              <el-tag type="warning" v-if="scope.row.is_auth == 0">未认证</el-tag>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button @click="handleDetail(scope.row)" text type="primary" class="p-1">
            <el-icon class="el-icon--left" :size="16">
              <Edit />
            </el-icon>详情
          </el-button>

          <el-button @click="handleEdit(scope.row)" text type="primary" class="p-1">
            <el-icon class="el-icon--left" :size="16">
              <Edit />
            </el-icon>修改
          </el-button>

          <el-popconfirm title="是否要删除该公司？" confirmButtonText="确认" cancelButtonText="取消"
            @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button text type="danger" class="p-1">
                <el-icon class="el-icon--left" :size="16">
                  <Delete />
                </el-icon>删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex items-center justify-center mt-5">
      <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
        :page-size="pageSize" @current-change="getList" />
    </div>


    <!-- 新增/修改 -->
    <FormDrawer destroyOnClose ref="formDrawerRef" size="30%" :title="drawerTitle" @submit="handleSubmit">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="150px" :inline="false">
        <el-form-item label="公司名称" prop="name">
          <el-input v-model="form.name" placeholder="公司名称"></el-input>
        </el-form-item>

        <el-form-item label="法人手机号" prop="mobile">
          <el-input v-model="form.mobile" placeholder="法人手机号"></el-input>
        </el-form-item>

        <el-form-item label="营业执照编号" prop="license_number">
          <el-input v-model="form.license_number" placeholder="营业执照编号"></el-input>
        </el-form-item>

        <el-form-item label="法人身份证号" prop="id_card">
          <el-input v-model="form.id_card" placeholder="法人身份证号"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" prop="corporation">
          <el-input v-model="form.corporation" placeholder="法人姓名"></el-input>
        </el-form-item>

        <el-form-item label="上传营业执照">
          <UploadFile :data="{ img_url: form.license_url, image_show_url: image_license_url }"
            @success="handleUploadSuccess" />
        </el-form-item>

      </el-form>
    </FormDrawer>
  </el-card>



  <el-dialog v-model="dialogVisible" title="详情" width="70%" height="80%" :before-close="handleClose">

    <el-row :gutter="20">
      <el-col :span="12">
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">公司名称: </span>
          <el-input v-model="detail.name" disabled class="w-50 m-2" placeholder="公司名称: " />
        </el-row>
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">法人姓名: </span>
          <el-input v-model="detail.corporation" disabled class="w-50 m-2" placeholder="法人姓名：: " />
        </el-row>
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">法人手机号: </span>
          <el-input v-model="detail.mobile" disabled class="w-50 m-2" placeholder="法人手机号: " />
        </el-row>
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">营业执照编号: </span>
          <el-input v-model="detail.license_number" disabled class="w-50 m-2" placeholder="营业执照编号: " />
        </el-row>
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">法人身份证号: </span>
          <el-input v-model="detail.id_card" disabled class="w-50 m-2" placeholder="法人身份证号: " />
        </el-row>
      </el-col>

      <el-col :span="12">
        <div>营业执照</div>
        <div class="block">
          <el-image style="width: 200px; height: 100px" :src="detail.image_license_url" fit="contain" />
        </div>

        <div>法人身份证头像面</div>
        <div class="block">
          <el-image style="width: 200px; height: 100px" :src="detail.image_corporation_front_url" fit="contain" />
        </div>
        <div>法人身份证国徽面</div>
        <div class="block">
          <el-image style="width: 200px; height: 100px" :src="detail.image_corporation_back_url" fit="contain" />
        </div>
      </el-col>


    </el-row>



    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-popconfirm title="是否认证该公司？" confirmButtonText="确认" cancelButtonText="取消"
          @confirm="setCompanyInfo(detail.id)">
          <template #reference>
            <el-tag type="warning" v-if="detail.is_auth == 0">未认证</el-tag>
          </template>
        </el-popconfirm>
      </span>
    </template>
  </el-dialog>

</template>
<script setup>
// vue 内部方法
import { ref } from 'vue'

// 页面组件
import ListHeader from "~/components/ListHeader.vue"
import FormDrawer from "~/components/FormDrawer.vue"
import SearchForm from "~/components/SearchForm.vue"
import SearchItem from "~/components/SearchItem.vue"
import UploadFile from "~/components/UploadFile.vue"
import { Search } from '@element-plus/icons-vue'

// 公共方法
import { useInitTable, useInitForm } from "~/composables/useCommon"


// api
import {
  getCompanyList,
  postCompany,
  putCompany,
  deleteCompany,
  setCompanyAuth,
} from "~/api/company/index"


// 初始化表格
const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  pageSize,
  getList,
  handleDelete,
} = useInitTable({
  searchForm: { search: "", name: "", is_auth: '' },
  requestListAPI: getCompanyList,
  delete: deleteCompany,
  // pageSize: store.state.pageSize.MessageList,
  pageSize: 10,
  onGetListSuccess: (res) => {
    tableData.value = res.data.results
  },
})

// 初始化表单
const {
  formDrawerRef,
  formRef,
  form,
  rules,
  editId,
  drawerTitle,
  handleSubmit,
  resetForm,
  handleCreate,
  handleEdit,
} = useInitForm({
  getList,
  create: postCompany,
  update: putCompany,
  form: {
    name: "",
    mobile: "",
    license_number: "",
    id_card: "",
    license_url: "",
    corporation: "",
    image_id: '',
  },
  // onGetDataSuccess: (res) => {
  //   // 将接口返回的公司列表数据命名为companyAllList
  //   companyAllList.value = res.data.name;
  // },
  rules: {
    name: [
      {
        required: true,
        message: "公司名称不能为空",
        trigger: "blur",
      },
    ],
  }

});

const image_license_url = ref('')
// 营业执照上传成功
const handleUploadSuccess = (res) => {
  form.license_url = res.response.url;
  image_license_url.value = res.response.url;
  form.image_id = res.response.id;
}

// 设置企业认证
const setCompanyInfo = async (id) => {
  await setCompanyAuth({ id: id, is_auth: 1 }).then((res) => {
    getList()
  })
}


const detail = ref({})
const dialogVisible = ref(false)
// 详情
const handleDetail = (row) => {
  detail.value = row
  dialogVisible.value = true
};

</script>

<style scoped></style>
